﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WechatMenu.aspx.cs" Inherits="MenuWeb.WechatMenu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body class=" fixed sidebar-mini">
    <div class="wrapper">
        <!-- Left side column. contains the logo and sidebar -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" style="margin: 2%;">
            <form id="form1">
                <div class="content">
                    <div class="form-group row">
                        <div class="col-sm-2">
                            <span style="font-size: 16px;">
                                <strong>accessToken</strong>
                            </span>
                        </div>
                        <div class="col-sm-6 text-left">
                            <input type="text" id="accessToken" class="form-control isnull" value="saqYauVX_cJqsHR_pHiukVWWBBo5BQvdeND9PtIY5-TXkWTkz9_XWnYIjP9rKd-SmTzqlDel-j9oJf8BzUTwGdtvnJ2EXCarQufMpNrlN3_1nL0910IaROhM3SO6ibbGWILhCDAOAD" style="display: inline-block;" />
                        </div>
                        <div class="col-sm-4">
                            <input type="button" class="btn btn-success" id="btn_PublishWechatMenu" value="发布微信菜单" />
                            <input type="button" class="btn btn-success" id="btn_Level" value="添加一级菜单" />
                            <input type="button" class="btn btn-success" id="btn_TwoLevel" value="添加二级菜单" />
                        </div>
                    </div>
                    <div class="form-group row">
                    </div>
                    <div id="divData" class="form-group" style="display: none;">
                        <div id="divFMenu" class="form-group row" style="display: none;">
                            <div class="col-sm-3">
                                <span style="font-size: 16px;">父级菜单</span>
                            </div>
                            <div class="col-sm-9">
                                <select id="sel_FMenu" class="form-control dropdown ">
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <span style="font-size: 16px;">菜单名称</span>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" id="MenuName" name="MenuName" class="form-control isnull" style="display: inline-block;" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <span style="font-size: 16px;">菜单类型</span>
                            </div>
                            <div class="col-sm-9">
                                <select id="sel_menuType" class="form-control dropdown ">
                                    <option value="0">请选择菜单类型</option>
                                    <option value="1">Click</option>
                                    <option value="2">View</option>
                                </select>
                            </div>
                        </div>
                        <div id="divKey" class="form-group row" style="display: none;">
                            <div class="col-sm-3">
                                <span style="font-size: 16px;">菜单key</span>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" id="MenuKey" name="MenuKey" class="form-control isnull" style="display: inline-block;" />
                            </div>
                        </div>
                        <div id="divUrl" class="form-group row" style="display: none;">
                            <div class="col-sm-3">
                                <span style="font-size: 16px;">菜单Url</span>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" id="MenuUrl" name="MenuUrl" class="form-control isnull" style="display: inline-block;" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <span style="font-size: 16px;">排序</span>
                            </div>
                            <div class="col-sm-9">
                                <input type="number" id="Orderby" name="Orderby" class="form-control isnull" style="display: inline-block;" />
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="hidden" id="hidLevel" value="0" />
                            <input type="hidden" id="saveType" value="0" />
                            <input type="hidden" id="MenuId" />
                            <input type="hidden" id="ParentId" />
                            <input type="hidden" id="MenuType" value="0" />
                            <input type="button" class="btn  btn-primary" id="btn_MenuSave" value="保存" />
                            <input type="button" class="btn btn btn-primary" id="btn_MenuCancel" value="取消" />
                            <span id="errorMsg" class="alert-danger"></span>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-6">
                            <label>
                                <strong>一级菜单</strong>
                                <input type="hidden" id="resultData" value="" />
                            </label>
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>菜单名字
                                        </th>
                                        <th>排序
                                        </th>
                                        <th>操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="oneLevelTbody">
                                </tbody>
                            </table>
                        </div>
                        <div class="col-sm-6">
                            <label>
                                <strong>二级菜单
                                </strong>
                            </label>
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>菜单名字
                                        </th>
                                        <th>父级菜单
                                        </th>
                                        <th>排序
                                        </th>
                                        <th>操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="twoLevelTbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.content-wrapper -->
    </div>
    <!-- REQUIRED JS SCRIPTS -->
    <script>
        $(document).ready(function () {

            $.ajax({
                url: "WechatMenu.aspx/GetDataList",
                data: {
                },
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    var data = JSON.parse(result.d);
                    if (data.Status == true) {
                        $("#resultData").val(result.d);
                        initializeTable(data.Datas);

                    } else {
                        $("#resultData").val("");
                    }
                }
            });

        });

        $("#btn_PublishWechatMenu").on("click", function () {
            var accessToken = $.trim($("#accessToken").val());
            if (accessToken == "") {
                alert("请输入accessToken");
                return;
            }
            if (confirm("确定发布微信菜单吗?")) {
                $.ajax({
                    url: "WechatMenu.aspx/PublishMenu",
                    data: "{'accessToken':'" + accessToken + "'}",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        alert(result.d);
                    }
                });
            }
        });

        $("#sel_menuType").on("change", function () {
            var value = $(this).val();
            $("#MenuType").val(value);
            if (value == 1) {//Click
                $("#divUrl").css("display", "none");
                $("#divKey").css("display", "");
            }
            else if (value == 2) {//View
                $("#divUrl").css("display", "");
                $("#divKey").css("display", "none");
            }
            else {
                $("#divUrl").css("display", "none");
                $("#divKey").css("display", "none");
            }
        });
        $("#sel_FMenu").on("change", function () {
            $("#ParentId").val($(this).val());
        });

        //添加一级菜单
        $("#btn_Level").on("click", function () {
            $("#Orderby").val(0);
            $("#MenuId").val("");
            $("#ParentId").val("");
            $("#MenuType").val(0);
            $("#MenuName").val("");
            $("#MenuKey").val("");
            $("#MenuUrl").val("");
            $("#sel_menuType").val(0);
            $("#Orderby").val(0);
            $("#saveType").val(0);
            $("#hidLevel").val(1);
            $("#divUrl").css("display", "none");
            $("#divKey").css("display", "none");
            $("#divData").css("display", "");
            $("#divFMenu").css("display", "none");
        });
        //添加二级菜单
        $("#btn_TwoLevel").on("click", function () {
            $("#Orderby").val(0);
            $("#MenuId").val("");
            $("#ParentId").val("");
            $("#MenuType").val(0);
            $("#sel_menuType").val(0);
            $("#sel_FMenu").val("");
            $("#MenuName").val("");
            $("#MenuKey").val("");
            $("#MenuUrl").val("");
            $("#Orderby").val(0);
            $("#saveType").val(0);
            $("#hidLevel").val(2);
            $("#divUrl").css("display", "none");
            $("#divKey").css("display", "none");
            $("#divData").css("display", "");
            $("#divFMenu").css("display", "");
        });
        //保存
        $("#btn_MenuSave").on("click", function () {
            debugger;
            if (!$("#errorMsg").hasClass("alert-danger")) {
                $("#errorMsg").addClass("alert-danger")
            }
            if ($("#errorMsg").hasClass("alert-success")) {
                $("#errorMsg").addClass("alert-success")
            }
            $("#errorMsg").html("");
            var editType = $.trim($("#saveType").val());
            var MenuName = $.trim($("#MenuName").val());
            var MenuKey = $.trim($("#MenuKey").val());
            var MenuUrl = $.trim($("#MenuUrl").val());
            var Orderby = parseInt($.trim($("#Orderby").val()));
            var MenuId = $.trim($("#MenuId").val());
            var ParentId = $.trim($("#ParentId").val());
            var MenuType = parseInt($.trim($("#MenuType").val()));
            var Level = $("#hidLevel").val();
            if (MenuName == "") {
                $("#errorMsg").html("请输入菜单名称");
                return;
            }
            if (MenuType == 1) {
                if (MenuKey == "") {
                    $("#errorMsg").html("请输入菜单Key");
                    return;
                }
            }
            if (MenuType == 2) {
                if (MenuUrl == "") {
                    $("#errorMsg").html("请输入菜单Url");
                    return;
                }
            }
            if (Level == 2 && ParentId == "") {
                $("#errorMsg").html("请选择父级菜单");
                return;
            }
            if (editType == 1) {//修改
                $.ajax({
                    url: "WechatMenu.aspx/UpdateData",
                    data: "{'menuId':'" + MenuId + "','menuName':'" + MenuName
                        + "','parentId':'" + ParentId + "','menuType':'" + MenuType
                        + "','menuKey':'" + MenuKey + "','menuUrl':'" + MenuUrl
                        + "','orderBy':'" + Orderby + "'}",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        var data = JSON.parse(result.d);
                        if (data.Status == true) {
                            $("#resultData").val(result.d);
                            initializeTable(data.Datas);
                            $("#errorMsg").removeClass("alert-danger").addClass("alert-success");
                            $("#errorMsg").html("保存成功");
                        } else {
                            $("#errorMsg").addClass("alert-danger").removeClass("alert-success");
                            $("#errorMsg").html(data.Msg);
                        }
                    }
                });
            }
            else {//添加
                $.ajax({
                    url: "WechatMenu.aspx/InsertData",
                    data: "{'menuName':'" + MenuName
                        + "','parentId':'" + ParentId + "','menuType':'" + MenuType
                        + "','menuKey':'" + MenuKey + "','menuUrl':'" + MenuUrl
                        + "','orderBy':'" + Orderby + "'}",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        var data = JSON.parse(result.d);
                        if (data.Status == true) {
                            $("#resultData").val(result.d);
                            initializeTable(data.Datas);
                            $("#errorMsg").removeClass("alert-danger").addClass("alert-success");
                            $("#errorMsg").html("保存成功");

                        } else {
                            $("#errorMsg").html(data.Msg);
                        }
                    }
                });
            }
        });

        //取消
        $("#btn_MenuCancel").on("click", function () {
            $("#Orderby").val(0);
            $("#hidLevel").val(0);
            $("#saveType").val(0);
            $("#MenuId").val("");
            $("#ParentId").val("");
            $("#MenuType").val(0);
            $("#MenuName").val("");
            $("#MenuKey").val("");
            $("#MenuUrl").val("");
            $("#Orderby").val(0);
            $("#divFMenu").css("display", "none");
            $("#divData").css("display", "none");
        });

        //修改
        $(document).on("click", "table input[name='btnUpdateMenu']", function () {
            debugger;
            $td = $(this).closest("td");
            $("#saveType").val(1);
            var MenuId = $td.find("input[name=MenuId]").val();
            $("#MenuId").val(MenuId);
            var ParentId = $td.find("input[name=ParentId]").val();
            $("#ParentId").val(ParentId);
            var MenuName = $td.find("input[name=MenuName]").val();
            $("#MenuName").val(MenuName);
            var MenuKey = $td.find("input[name=MenuKey]").val();
            $("#MenuKey").val(MenuKey);
            var MenuUrl = $td.find("input[name=MenuUrl]").val();
            $("#MenuUrl").val(MenuUrl);
            var Orderby = $td.find("input[name=Orderby]").val();
            $("#Orderby").val(Orderby);
            var level = $td.find("input[name=MenuLevel]").val();
            if (level == 1) {
                $("#hidLevel").val(1);
                $("#divData").css("display", "");
                $("#divFMenu").css("display", "none");
            }
            else {
                $("#hidLevel").val(2);
                $("#divData").css("display", "");
                $("#divFMenu").css("display", "");

                var ParentId = $td.find("input[name=ParentId]").val();
                $("#sel_FMenu").val(ParentId);
            }
            var type = $td.find("input[name=MenuType]").val();
            $("#sel_menuType").val(type);
            $("#MenuType").val(type);
            if (type == 1) {
                $("#divUrl").css("display", "none");
                $("#divKey").css("display", "");
            }
            else if (type == 2) {
                $("#divUrl").css("display", "");
                $("#divKey").css("display", "none");
            }
            else {
                $("#divUrl").css("display", "none");
                $("#divKey").css("display", "none");
            }
        });
        //删除
        $(document).on("click", "table input[name='btnDeleteMenu']", function () {
            $td = $(this).closest("td");
            var MenuId = $td.find("input[name=MenuId]").val();
            if (MenuId == "") {
                alert("无效的提交数据");
                return;
            }
            if (confirm("确定删除吗？")) {
                $.ajax({
                    url: "WechatMenu.aspx/DeleteData",
                    data: "{'menuId':'" + MenuId + "'}",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        var data = JSON.parse(result.d);
                        if (data.Status == true) {
                            $("#resultData").val(result.d);
                            initializeTable(data.Datas);

                        } else {
                            alert(data.Msg);
                        }
                    }
                });
            }
        });

        var initializeTable = function (array) {
            var parentSelect = "<option value=''>请选择父级菜单</option>";
            var oneLevelTr = "";
            $.each(array, function () {
                oneLevelTr = oneLevelTr + "<tr>";
                $this = $(this)[0];
                if ($this.ParentId == "") {
                    parentSelect = parentSelect + "<option value=" + $this.MenuId + ">" + $this.MenuName + "</option>"

                    var oneLevelTd = "<td>" + $this.MenuName + "</td>" + "<td>" + $this.Orderby + "</td>";
                    oneLevelTr = oneLevelTr + oneLevelTd;
                    oneLevelTr = oneLevelTr + "<td>"
                        + '<input type="button"  class="btn btn-info" name="btnUpdateMenu" value="修改" />'
                        + '<input type="button"  class="btn btn-info" name="btnDeleteMenu" value="删除" />'
                        + '<input type="hidden" name="MenuId" value="' + $this.MenuId + '" />'
                        + '<input type="hidden" name="ParentId" value="' + $this.ParentId + '" />'
                        + '<input type="hidden" name="MenuName" value="' + $this.MenuName + '" />'
                        + '<input type="hidden" name="MenuKey" value="' + $this.MenuKey + '" />'
                        + '<input type="hidden" name="MenuType" value="' + $this.MenuType + '" />'
                        + '<input type="hidden" name="MenuUrl" value="' + $this.MenuUrl + '" />'
                        + '<input type="hidden" name="Orderby" value="' + $this.Orderby + '" />'
                        + '<input type="hidden" name="MenuLevel" value="1" />'
                    + "</td></tr>";
                }
            });
            $("#oneLevelTbody").html(oneLevelTr);
            $("#sel_FMenu").html(parentSelect);

            var twoLevelTr = "";
            $.each(array, function () {
                twoLevelTr = twoLevelTr + "<tr>";
                var $this = $(this)[0];
                var parentId = $this.ParentId;
                if (parentId != "") {
                    var twoLevelTd = "<td>" + $this.MenuName + "</td>";
                    var hasP = false;
                    $.each(array, function () {
                        var $pthis = $(this)[0];
                        if ($pthis.MenuId == parentId) {
                            twoLevelTd = twoLevelTd + "<td>" + $pthis.MenuName + "</td>"
                            hasP = true;
                        }
                    });
                    if (!hasP) {
                        twoLevelTd = twoLevelTd + "<td>&nbsp;</td>"
                    }
                    twoLevelTd = twoLevelTd + "<td>" + $this.Orderby + "</td>"
                    twoLevelTr = twoLevelTr + twoLevelTd;
                    twoLevelTr = twoLevelTr + "<td>"
                                            + '<input type="button"  class="btn btn-info" name="btnUpdateMenu" value="修改" />'
                                            + '<input type="button"  class="btn btn-info" name="btnDeleteMenu" value="删除" />'
                                            + '<input type="hidden" name="MenuId" value="' + $this.MenuId + '" />'
                                            + '<input type="hidden" name="ParentId" value="' + $this.ParentId + '" />'
                                            + '<input type="hidden" name="MenuName" value="' + $this.MenuName + '" />'
                                            + '<input type="hidden" name="MenuKey" value="' + $this.MenuKey + '" />'
                                            + '<input type="hidden" name="MenuType" value="' + $this.MenuType + '" />'
                                            + '<input type="hidden" name="MenuUrl" value="' + $this.MenuUrl + '" />'
                                            + '<input type="hidden" name="Orderby" value="' + $this.Orderby + '" />'
                                            + '<input type="hidden" name="MenuLevel" value="2" />'
                                        + "</td></tr>";
                }
            });
            $("#twoLevelTbody").html(twoLevelTr);
        }
    </script>
</body>
</html>
